<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>停车记录</el-breadcrumb-item>
				<el-breadcrumb-item>泊位视频识别分析</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--概览-->
			<!--<div class="overview wrapper">
				<div class="title">
					总概览
				</div>
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="statisticsBox">
							<img src="./money.png" width="60" height="60">
							<div class="record right">
								<div class="record_count">
									324,532
								</div>
								<div class="record_title">
									今日营收金额
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>-->
			<!--已选择条件区域-->
			<div class="hasChecked">
				<div class="checked_left">
					{{toggleSearchFlag ? '您已选择' : '请选择'}}
				</div>
				<transition name="fade">
					<div class="checked_mid" v-show="toggleSearchFlag">					
						<div class="ckecked_item" v-for="item in hasCheckedList">
							<div class="ckecked_label">
								{{item.label}}
							</div>
							<div class="ckecked_value">
								{{item.value}}
								<i class="iconfont icon-cuowu" style="font-size: 12px; color: #20A0FF; margin-left: 20px; margin-right: 0px;" @click="removeTerm(item)"></i>
							</div>
						</div>
					</div>
				</transition>
				<div class="checked_right">
					<el-button type="text" @click="toggleSearchDiv">{{!toggleSearchFlag?'收起':'展开'}} <i :class=" toggleSearchFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i></el-button>
				</div>				
			</div>
			<!--搜索条件区域-->
			<transition name="spead">
			<div class="searchWrapper" v-show="!toggleSearchFlag">				
				<ul>
					<li class="searchItem">
						<div class="searchLabel">
							区域：
						</div>
						<div class="searchRadio">
							<RadioBtn v-model.trim="formInline.cityId" :radioData="areaData" ref="cityId"></RadioBtn>
						</div>
					</li>					
					<li class="searchItem">
						<div class="searchLabel">
							车场类型：
						</div>
						<div class="searchRadio">
							<RadioBtn v-model.trim="formInline.rsType" :radioData="typeData"  ref="rsType"></RadioBtn>
						</div>						
					</li>
					<li class="searchItem">
						<div class="searchLabel">
							停车场：
						</div>
						<div class="searchRadio" style="width: calc(100% - 150px);">
							<RadioBtn v-model.trim="formInline.tenantId" :radioData="tenantData" @change="getPark"></RadioBtn>
						</div>
						<div class="right">							
							<el-button type="text" @click="toggleDiv">{{!toggleFlag?'展开':'收起'}} <i :class=" toggleFlag?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>						
						</div>	
						<div class="parkListWrapper" :class="{spread:!toggleFlag}"  @keydown.enter="getPark">							
							<div class="noLimit searchRadio" :class="{active: checkList.length==0}" @click="checkList=[]">不限</div>	
							<el-input placeholder="请输入停车场名称" icon="search" v-model.trim="formInline.parkName" :on-icon-click="getPark"  style="width: 200px;float: right;"></el-input>													
							<el-checkbox-group v-model.trim="checkList" :max='5' class="right" style="max-height: 160px; overflow: auto; font-size: 12px; line-height: 30px; padding-left: 10px;" ref="parkId">
					<el-checkbox style="margin: 0 20px 15px 0; line-height: 0px;" :label="item.parkId" v-for="item in parkList" :key="item.parkId">{{item.parkName}}</el-checkbox>
							</el-checkbox-group>							
						</div>
					</li>
					<li class="searchItem">
						<div class="searchLabel">
							入场时间段：
						</div>
						<el-date-picker v-model.trim="formInline.entryTime" type="datetimerange" placeholder="选择时间范围" style="margin-left: 10px;" ref="entryTime"></el-date-picker>	
					</li>
					<li class="searchItem">
						<div class="searchLabel">
							出场时间段：
						</div>
						<el-date-picker v-model.trim="formInline.exitTime" type="datetimerange" placeholder="选择时间范围" style="margin-left: 10px;" ref="exitTime"></el-date-picker>	
					</li>
					<li class="searchItem">
						<div class="searchLabel">
							车牌号：
						</div>	
						<div class="left">
							<el-input v-model.trim="formInline.plateNumber" placeholder="请输入车牌号" style="margin-left: 10px;" ref='plateNumber' :maxlength="7"></el-input>
						</div>																
					</li>
					<li class="searchItem">
						<div class="right">
							<el-button type="primary" icon="search" style="width: 140px;" @click="searchData">查询</el-button>
						</div>	
						<div class="left">
							<el-button type="text" @click="clearFormData">清空筛选项</el-button>
						</div>																
					</li>
				</ul>				
			</div>
			</transition>				
			<!--列表区域-->
			<div class="tableWrapper">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="400">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop" :formatter="item.formatter"></el-table-column>
					<el-table-column label="操作" width="70">
						<template scope="scope">
							<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页器-->
			<div class="pagerWrapper">
				<div class="block">					
					<el-pagination @size-change="" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<PicDetail :infoSize="infoSize" :infoData="infoData" :infoDetail="infoDetail" :detailFlag="detailFlag"
               @close="detailFlag=false" @clickBtn="changeDetail"></PicDetail>
	</div>
</template>

<script>
	import {
		getData,
		dateFormat
	} from '../../common/js/public.js'
	import RadioBtn from '../../components/radio-btn/radio-btn'
	import PicDetail from '../../components/picDetail/picDetail'
	export default {
		name: 'hello',
		data () {
			return {
				toggleSearchFlag: false,
				toggleFlag: true,
				index: 0,
				total: 0,
				pageSize: 15,
				pageNum: 1,
				loading: false,
				detailFlag: false,
				areaList: [],
				parkList: [],
				tenantList: [],
				checkList: [],
				hasCheckedList: [],
				tableCols: [{
					prop: 'cityName',
					label: '区域',
					width: '80'
				}, {
					prop: 'parkType',
					label: '车场类型',
					width: '',
					formatter: (row) => {
						if (row.parkType == 0) {
							return "开放";
						} else if (row.parkType == 1) {
							return "封闭";
						} else if (row.parkType == 2) {
							return "半封闭";
						} else if (row.parkType == 3) {
							return "垂停";
						} else if (row.parkType == 4) {
							return "混合";
						} else if (row.parkType == 5) {
							return "PDA";
						}
					}
				}, {
					prop: 'parkName',
					label: '停车场',
					width: ''
				}, {
					prop: 'tenantName',
					label: '商户名称',
					width: ''
				}, {
					prop: 'plateNumber',
					label: '车牌号',
					width: ''
				}, {
					prop: 'berthNumber',
					label: '泊位号',
					width: ''
				}, {
					prop: 'entryTime',
					label: '入场时间',
					width: ''
				}, {
					prop: 'exitTime',
					label: '离场时间',
					width: ''
				}, {
					prop: 'parkMinutesStr',
					label: '停车时长',
					width: ''
				}, {
					prop: 'shouldPay',
					label: '应收金额',
					width: ''
				}],
				tableData: [],
				tenantData: [{
		    		value: '',
		    		label: '公共车场'
		    	}],
				areaData: [{
		    		value: '',
		    		label: '全部'
		    	}],
				parkData: [{
		    		value: '',
		    		label: '全部'
		    	}],
				typeData: [{
		    		value: '',
		    		label: '全部',
		    		name: 'type'
		    	}, {
		    		value: '1',
		    		label: '封闭',
		    		name: 'type'
		    	}, {
		    		value: '2',
		    		label: '半封闭',
		    		name: 'type'
		    	}, {
		    		value: '3',
		    		label: '垂停',
		    		name: 'type'
		    	}, {
		    		value: '4',
		    		label: 'PDA',
		    		name: 'type'
		    	}, {
		    		value: '5',
		    		label: '开放',
		    		name: 'type'
		    	}],
				formInline: {
					cityId: '',
					rsType: '',
					parkIds: '',
					parkName: '',
					tenantId: '',
					entryTime: [],
					exitTime: [],
					plateNumber: ''
				},
				infoSize: 4,
				infoData: [{
					label: '停车场名称',
					value: 'parkName'
				}, {
					label: '支付金额',
					value: 'paidMoney',
					formatter: (row) => {
						return `&yen; ${Number(row).toFixed(2)}`
					}
				}, {
					label: '入场时间',
					value: 'entryTime'
				}, {
					label: '支付状态',
					value: 'orderState',
					formatter: (row) => {
						if (row == 0) {
							return '<span style="color: #E34C4C">未支付</span>'
						} else if (row == 1) {
							return '<span style="color: #56BD5B">已支付</span>'
						}
					}
				}, {
					label: '出场时间',
					value: 'exitTime'
				}, {
					label: '车牌号码',
					value: 'plateNumber'
				}],
				infoDetail: {}
			}
		},
		methods: {
			clearFormData () {
				this.checkList = [];
				for (let i in this.formInline) {
					if (this.formInline[i] instanceof Array) {
						this.formInline[i] = [];
					} else {
						this.formInline[i] = "";
					}					
				}
			},
			toggleDiv () {
				this.toggleFlag = !this.toggleFlag;
			},
			handleCurrentChange (val) {
		       this.pageNum = val;
		       this.searchData();
		    },
			showLog () {
				console.log(this.formInline.type)
			},
			changeDetail (type) {		
				console.log(type)
				if ((this.index === 0 && type === 'pre') || (this.index === (this.tableData.length - 1) && type === 'next')) {
					this.$alert('没有更多数据了', '提示', {
						confirmButtonText: '确定'
					});
				} else {
					type === 'pre' ? this.index -- : this.index ++;						
					let opt = {
						url: '/gplus/parkRecord/queryParkRecordDetail',
						data: {
							parkRecordId: this.tableData[this.index].parkRecordId
						},
						success: (res) => {
							this.infoDetail = res.data.ParkRecordVO;
						}
					};
					getData(opt);
				}				
			},
			showDetail (index, obj) {
				this.index = index;
				this.detailFlag = true;
				let opt = {
					url: '/gplus/parkRecord/queryParkRecordDetail',
					data: {
						parkRecordId: obj.parkRecordId
					},
					success: (res) => {
						this.infoDetail = res.data.ParkRecordVO;
					}
				};
				getData(opt);
			},
			// 获取区域
			getArea () {
				let opt = {
					url: '/gplus/city/queryAreaListByUserAndCity',
					data: {},
					success: (res) => {
						this.areaList = res.data.CityVO;
						this.areaList.forEach((item) => {
							let obj = {
								value: item.cityId,
		    					label: item.cityName
							};
							this.areaData.push(obj);
						});
					}
				};
				getData(opt);
			},
			// 获取停车场
			getPark () {
				this.parkList = [];
				this.checkList = [];
				let opt = {
					url: '/gplus/park/queryParkDropDownList',
					data: {
						rsType: this.formInline.rsType,
						cityId: this.formInline.cityId,
						parkName: this.formInline.parkName	
					},
					success: (res) => {
						this.parkList = res.data.ParkVO;
						this.formInline.parkIds = '';						
					}
				};
				getData(opt);
			},
			// 获取商户
			getTenant () {
				let opt = {
					url: '/gplus/bdTenant/getAllTenants',
					data: {},
					success: (res) => {
						this.tenantList = res.data.allTenants;
						this.tenantList.forEach((item) => {
							let obj = {
								value: item.parkTenantId,
		    					label: item.name
							};
							this.tenantData.push(obj);
						});
					}
				};
				getData(opt);
			},
			// 搜索
			searchData () {
				this.tableData = [];
				this.loading = true;
				let entryTime = this.formInline.entryTime;
				let exitTime = this.formInline.exitTime;
				console.log(this.formInline)
				this.formInline.startEntryTime = entryTime.length == 0 ? '' : dateFormat(entryTime[0]);			
				this.formInline.endEntryTime = entryTime.length == 0 ? '' : dateFormat(entryTime[1]);
				this.formInline.startExitTime = exitTime.length == 0 ? '' : dateFormat(exitTime[0]);
				this.formInline.endExitTime = exitTime.length == 0 ? '' : dateFormat(exitTime[1]);
				this.formInline.parkIds = this.checkList.toString();
				let opt = {
					url: '/gplus/parkRecord/getParkRecordWithUserNew',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					data: this.formInline,
					success: (res) => {
						this.tableData = res.data.ParkRecordWithUserVOList;
						this.total = res.total;
						this.loading = false;
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			},
			getCheckedList () {
				this.hasCheckedList = [];
				let lebals = [{
						label: '区域',
						value: 'cityId',
						data: this.areaList
					}, {
						label: '车场类型',
						value: 'rsType',
						data: this.areaList
					}, {
						label: '停车场',
						value: 'parkId',
						data: this.areaList
					}, {
						label: '入场时间段',
						value: 'entryTime',
						data: this.areaList
					}, {
						label: '出场时间段',
						value: 'exitTime',
						data: this.areaList
					}, {
						label: '车牌号',
						value: 'plateNumber',
						data: this.areaList
					}];				
				// 用dom获取值
				for (let i in this.formInline) {
					if (this.formInline[i] != '') {
						// 获取名称
						for (let k in lebals) {
							if (i == lebals[k].value) {
								var label = lebals[k].label;
							}
						}
						// 获取值
						if (i == 'plateNumber') {
							let item = {
								value: this.$refs[i].value,
								label: label,
								prop: i
							}
							this.hasCheckedList.push(item);
						} else if (i == 'entryTime' || i == 'exitTime') {
							let item = {
								value: this.$refs[i].refInput.value,
								label: label,
								prop: i
							}
							this.hasCheckedList.push(item);
						} else if (this.$refs[i] && this.$refs[i].radioData) {	
							for (let j in this.$refs[i].radioData) {
								if (this.$refs[i].value == this.$refs[i].radioData[j].value) {
									let item = {
										value: this.$refs[i].radioData[j].label,
										label: label,
										prop: i
									}
									this.hasCheckedList.push(item);
								}
							}
						} 						
					}
				}
				if (this.checkList.length) {
					let parkName = [];
					this.checkList.forEach((item) => {
						for (let i in this.parkList) {
							if (this.parkList[i].parkId == item) {
								parkName.push(this.parkList[i].parkName);
							}
						}
					});							
					let obj = {
						value: parkName.toString(),
						label: '停车场',
						prop: 'checkList'
					};
					console.log(obj)
					this.hasCheckedList.push(obj);
				}
				console.log(this.hasCheckedList);
			},
			toggleSearchDiv () {
				this.toggleSearchFlag = !this.toggleSearchFlag;
				this.getCheckedList();
			},
			removeTerm (item) {
				if (item.prop == 'checkList') {
					this.checkList = [];
				} else {
					let date = this.formInline[item.prop];
					this.formInline[item.prop] = (date instanceof Array) ? [] : '';
				}				
				this.getCheckedList();
				this.searchData();
			}
		},
		components: {	
			RadioBtn,
			PicDetail
		},
		created () {
			this.getArea();
			this.getPark();
			this.getTenant();
		},
		mounted () {			
			console.log(this.$refs.plateNumber)
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
	.parkListWrapper .el-checkbox__label{
		font-size: 12px;
	}
</style>
<style scoped lang="stylus" rel="stylesheet/stylus">
.spead-enter-active, .spead-leave-active {
  transition: height .5s;
  height: 700px;
}
.spead-enter, .spead-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  height: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	overflow: hidden;
	.overview
		background: #FFFFFF;
		border: 1px solid #C0CCDA;
		border-radius: 4px;
		height: 127px;
		overflow: hidden;
		.title
			font-size: 14px;
			color: #475669;
			padding-left: 17px;
			height: 30px;
			line-height: 30px;
		.statisticsBox
			padding: 15px;
			.record
				text-align: right;
				.record_count
					font-size: 26px;
					color: #313541;
					height: 40px;
				.record_title
					font-size: 14px;
					color: #475669;
	.hasChecked
		position: relative;
		background: #FFFFFF;
		border: 1px solid #C0CCDA;
		border-top: 4px solid  #0091FA;
		margin-top: 20px;	
		padding: 0 120px;
		min-height: 70px;		
		.checked_mid
			padding: 0px 10px 20px;
			overflow: hidden;
			.ckecked_item
				float: left;
				margin-top: 20px;
				margin-right: 20px;
				border: 1px solid #0099FA;	
				border-radius: 4px;		
				color: #1F2D3D;
				.ckecked_label
					float: left;
					background: #0099FA;
					font-size: 12px;
					padding: 7px 8px;
					color: #fff;
				.ckecked_value
					float: left;
					padding: 7px 8px 6px;
					font-size: 12px;
		.checked_left
			position: absolute;
			left: 0;
			top: 27px;
			width: 120px;
			text-align: right;
			color: #5E6D82
		.checked_right
			position: absolute;
			right: 22px;
			top: 20px;
	.searchWrapper
		background: #EFF2F7;
		padding: 0 22px;
		margin-bottom: 20px;
		transition: all 0.7s;
		ul
			.searchItem							
				line-height: 55px;
				border-bottom: 1px solid #D3DCE6;
				overflow: hidden;
				.noLimit
					position: relative;
					height: 26px;
					line-height: 26px;
					padding: 0px 8px;
					font-size: 12px;
					color: #1F2D3D;
					float: left;
					margin-left: 10px;
					cursor: pointer;
					clear: both;
					float: left;
					&.active
						background: #0099FA;
						border-radius: 2px;
						color: #fff;
				.searchLabel
					width: 100px;
					text-align: right;
					color: #5E6D82;
					font-size: 12px;
					font-weight: 900;
					float: left;
				.searchRadio
					float: left;
					margin-top: 15px;
				.parkListWrapper					
					clear: both;
					float: right;
					width: calc(100% - 100px);
					border-top: 1px dashed #D3DCE6;					
					transition: all 0.5s ease-in-out; 
					height: 220px;
					&.spread
						height: 0px;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
.detail
	width: 61.4%;
	height: 82.9%;
	position: absolute;
	top: 8.6%;
	left: 20.1%;
	background: #FFFFFF;
	box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
	border-radius: 3px;	
	z-index: 1000;
	box-sizing: border-box;
	padding: 20px 0;
	.title
		position: absolute;
		background: #3F4A56;
		border-radius: 3px 3px 0 0;
		color: #fff;
		width: 100%;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: inherit;
		z-index: 100;
		.el-icon-close
			float: right;
			margin-top: 14px;
	.info
		margin-top: 20px;
		padding: 2.1%;	
		height: 100%;
		overflow: auto;
		box-sizing: inherit;
.mask
	background: rgba(49,53,65,0.60);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
</style>
